<template>
	<view :style="theme">
		<view class="content">
			<view class="card flex" v-for="(item, index) in list" :key="index" @click="jump('/pages/order/detail?type=6&orderId=',item.orderId)">
			    <view class="top" :class="item.status == 1 || item.status == 2?'hui':''">{{item.status == 0?'待支付':item.status == 1?'超时未支付':item.status == 2?'取消支付':item.status == 3?'支付成功':item.status == 4?'退款中':'退款成功'}}</view>
			    <view class="left">
			      <image :src="item.poster"></image>
			    </view>
			    <view class="right">
			      <view class="bt">{{item.activityName }}</view>
			      <view class="tip">活动时间：{{item.activityTime }}</view>
			      <view class="tip">报名人员：{{item.name}}</view>
			      <view class="tip">活动地点：{{item.siteName}}</view>
			    </view>
			  </view>
			<u-loadmore v-if="end && list.length >= 10" :status="status"  line />
		</view>
		<view v-if="list.length === 0" class="no-order">
			<image :src="imgHost+'/default_nodata.png'"></image>
			<view>暂无活动～</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 1,
				end: false,
				firstQueryTime: '',
				status: 'nomore',
			}
		},
		onShow() {
			this.firstQueryTime = this.$app.firstQueryTime()
			this.list = [];
			this.page = 1;
			this.end = false;
			this.getList()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			getList() {
				this.$app.ajax({
					data: {
						pagination: {
							firstQueryTime: this.firstQueryTime,
							page: this.page,
							rows: 10
						},
						param: {
							venueId: this.venueId,
							memberId: this.userInfo.id
						}
					},
					api: this.$api.myActivityOrderListMini()
				}).then((res) => {
					if (res.errorCode === '000000') {
						if (!res.recordList || res.recordList.length < 10) {
							this.end = true
						}
						if (res.recordList) {
							this.list = this.list.concat(res.recordList)
						}
					}
				}).catch(() => {})
			},
			reachBottom() {
				if (!this.end) {
					this.page += 1;
					this.getList();
				}
			},
			// 触底加载更多数据
			onReachBottom(e) {
				this.reachBottom()
			}

		}

	}
</script>
<style scoped lang="scss">
	.content {
	  padding: 30rpx;
	  box-sizing: border-box
	}
	
	.card {
	  background: #FFFFFF;
	  border-radius: 8rpx;
	  position: relative;
	  padding: 30rpx;
	  box-sizing: border-box;
	  margin-bottom: 30rpx;
	}
	
	.top {
	  position: absolute;
	  top: 0;
	  left: 0;
	  font-size: 24rpx;
	  color: #FFFFFF;
	  padding: 0 20rpx;
	  line-height: 48rpx;
	  height: 48rpx;
	  background: $phb;
	  box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.1);
	  border-radius: 16rpx 0 16rpx 0;
	}
	.top.hui {
	  background: rgb(153,153,153);
	}
	
	.left image {
	  width: 168rpx;
	  height: 168rpx;
	  border-radius: 16px;
	  margin-right: 30rpx;
	}
	.right .bt{
	  font-size: 32rpx;
	  font-weight: 500;
	  color: #222222;
	  line-height: 1.5;
	  margin-bottom: 5rpx;
	}
	.right .tip{
	  font-size: 24rpx;
	  color: #555555;
	  line-height: 1.5;
	  margin-bottom: 5rpx;
	}
	.right .tip:last-of-type{
	  margin-bottom: 0;
	}
</style>
